@extends('backend.layouts.base')
@section('title', '我的模版')
@section('content')
    <style>
        .theme-list-item{
            position: relative;
            text-align:center;
            width:250px;
            height:535px;
            margin:20px;
            float:left;
            border: 1px solid #e8e8e8;
        }
        .theme-list-item-top{
            position: absolute;
            z-index: 9;
            display: flex;
            justify-content: space-between;
            width: 90%;
            left: 5%;
            top: 10px;
        }
        .theme-list-item-top span{
            color: #fff;
            background: #409EFF;
            padding: 3px 10px;
            border: 1px solid #eee;
        }
        .theme-list-item-img{
            border-bottom: 1px solid #e8e8e8;
        }
        .theme-list-item-text{
            display: flex;
            justify-content: space-between;
            margin: 10px auto;
            width: 235px;
        }
        .theme-list-item-name{
            text-align: left;
            width: 190px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .theme-list-item-switch{
            width: 40px;
        }
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-main">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">我的模版</div>
                </div>
                <div v-loading.fullscreen.lock="loading" class="clearfix">
                    <!-- 列表 -->
                    <div v-for="(item,index) in list">
                        <div class="theme-list-item">
                            <div class="theme-list-item-top">
                                <span>[[item.type_desc]]</span>
                                <span v-if="item.is_default">默认模版</span>
                            </div>
                            <img :src="item.thumb" class="theme-list-item-img" style="width:248px;height:450px;" alt="">
                            <div class="theme-list-item-text" :title="item.name">
                                <span class="theme-list-item-name" :title="item.name">
                                    [[item.name]]
                                </span>
                                {{--<span class="theme-list-item-switch">
                                    <el-switch v-model="item.status" :active-value="1" :inactive-value="0" @change="changeStatus(item.id)"></el-switch>
                                </span>--}}
                            </div>
                            <div class="theme-list-item-opt">
                                <el-button @click="edit(item.id)" size="small">编辑</el-button>
                                <el-dropdown trigger="click">
                                    <span class="el-dropdown-link">
                                        <el-button size="small">操作</el-button>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="setDefault(item.id)">
                                            设置默认
                                        </el-dropdown-item>
                                        <el-dropdown-item @click.native="update(item.id)">同步配置</el-dropdown-item>
                                       {{-- <el-dropdown-item>删除</el-dropdown-item>--}}
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </div>
                    <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-if="page_total != 0">
                        <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="page_total"
                                       :page-size="page_size" :current-page="current_page"></el-pagination>
                    </el-col>
                    <el-col :span="24" align="center" migra style="padding:15px 5% 15px 0" v-if="page_total == 0">
                        暂无数据！
                    </el-col>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'settingSite',
            data() {
                return{
                    dialog_loading:false,
                    table_loading:false,
                    loading:false,
                    list:[],
                    use_theme_form:{
                        'name':''
                    },
                    useThemeShow:false,
                    type_id:0,
                    page_id:0,
                    category_name:"",
                    type:'',
                    page:'',
                    //分页
                    page_total:0,
                    current_page:1,
                    page_size:10,
                    rules:{},
                }
            },
            created() {
            },
            mounted() {
                this.getData(1);
            },
            methods: {
                getData(page) {
                    var that = this;
                    that.loading = true;
                    let json = {type_name:that.type_id,pages_name:that.page_id,category_name:that.category_name,page:1}
                    that.$http.post("{!! absolute_admin_url('theme.theme.getList') !!}",json).then(response => {
                        console.log(response);
                        if(response.data.result==1){
                            that.page_total = response.data.data.total;
                            that.page_size = response.data.data.per_page;
                            that.current_page = response.data.data.current_page;
                            that.list = response.data.data.data;
                        }
                        else{
                            that.$message.error(response.data);
                        }
                       //console.log(that.goods_list);
                        that.loading = false;
                    }),function(res){
                        console.log(res);
                        that.loading = false;
                    };
                },
                search(val) {
                    this.getData(val);
                },
                currentChange(page) {
                    this.getData(page);
                },
                /*changeStatus(id) {
                    this.$confirm('确定修改状态吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.$http.post('{!! absolute_admin_url('theme.theme.changeStatus') !!}',{id:id}).then(function (response) {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.getData(this.current_page);
                                }
                                else{
                                    this.$message({type: 'error',message: response.data.msg});
                                }
                                loading.close();
                                this.search(this.current_page)
                            },function (response) {
                                this.$message({type: 'error',message: response.data.msg});
                                loading.close();
                            }
                        );
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消操作'});
                    });
                },*/
                setDefault(id) {
                    this.$confirm('确定将此模版设置为默认模版吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.$http.post('{!! absolute_admin_url('theme.theme.setDefault') !!}',{id:id}).then(function (response) {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.getData(this.current_page);
                                }
                                else{
                                    this.$message({type: 'error',message: response.data.msg});
                                }
                                loading.close();
                                this.search(this.current_page)
                            },function (response) {
                                this.$message({type: 'error',message: response.data.msg});
                                loading.close();
                            }
                        );
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消操作'});
                    });
                },
                update(id) {
                    this.$confirm('确定更新模版吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.$http.post('{!! absolute_admin_url('theme.theme.update') !!}',{id:id}).then(function (response) {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.getData(this.current_page);
                                }
                                else{
                                    this.$message({type: 'error',message: response.data.msg});
                                }
                                loading.close();
                                this.search(this.current_page)
                            },function (response) {
                                this.$message({type: 'error',message: response.data.msg});
                                loading.close();
                            }
                        );
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消操作'});
                    });
                },
                edit(id) {
                    let link = `{!! absolute_admin_url('theme.theme.pageDetail') !!}`+`&theme_id=`+id;
                    window.location.href = link;
                },
            },
        })

    </script>
@endsection
